<template>
  <div id="app">
    <main>
      <section style="position: relative; height: 0; padding-bottom: 56.25%;">
        <div class="container" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
          <video-play v-if="videoInfo.videoId" :videoId="videoInfo.videoId" style="width: 80%; height: 90%;"></video-play>
        </div>
      </section>
      <div class="video-info-container">
        <!-- 课程描述 -->
        <div class="video-info">
          <h1>课程章节名称：{{videoInfo.subjectName}}</h1>
          <div class="video-desc">
            课程描述：{{videoInfo.subjectDesc}}
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>


import {Message} from "element-ui";
import VideoPlay from "@/components/VideoPlay.vue";

export default {
  components: {
    VideoPlay
  },
  data() {
    return {
      videoInfo: {},
    };
  },
  mounted() {
    this.getVideoInfo();
  },
  methods: {
    // 根据视频id获取视频信息
    getVideoInfo() {
      let id = this.$route.params.id;
      if (id === undefined || id === "" || id == null) {
        this.messageError("参数错误")
        this.$router.push('/')
      }
      this.request.get("/subject/" + id).then(res => {
        if (res.code === '200') {
          this.videoInfo = res.data
        } else {
          this.messageError("获取视频失败")
        }
      }).catch(error => {
        Message.error("获取视频失败")
      })
    },
  },

};
</script>


<style scoped>
.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.video-info-container {
  width: 100%;
  background-color: #f4f4f4; /* 浅灰色背景 */
  padding: 20px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* 底部阴影 */
}

.video-info h1 {
  margin: 0;
  color: #333;
}

.video-desc {
  color: #666;
  font-size: 14px;
}
</style>